<template>
  <div class="searchCategorieView" v-if="categories && list && title">
    <header>
      <div class="back">
        <van-icon name="arrow-left" size="22" color="black" @click="back" />
      </div>
      <div class="title">
        {{ title }}
      </div>
      <div></div>
    </header>
    <div class="top">
      <div class="categories" @click.stop="handle($event)">
        <div
          class="categorie"
          v-for="(categorie, index) in categories"
          :key="index"
          :data-index="index"
          :class="{ currentCategorie: categorieI == index }"
        >
          {{ categorie.title }}
        </div>
      </div>
      <div class="all" @click.stop="showAllCategories">
        <svg
          t="1677487044424"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="804"
          width="22"
          height="22"
        >
          <path
            d="M404.48 490.057143H131.657143c-48.274286 0-87.771429-39.497143-87.771429-87.771429V129.462857c0-48.274286 39.497143-87.771429 87.771429-87.771428h272.822857c48.274286 0 87.771429 39.497143 87.771429 87.771428V402.285714c0 48.274286-39.497143 87.771429-87.771429 87.771429zM131.657143 100.205714c-16.091429 0-29.257143 13.165714-29.257143 29.257143V402.285714c0 16.091429 13.165714 29.257143 29.257143 29.257143h272.822857c16.091429 0 29.257143-13.165714 29.257143-29.257143V129.462857c0-16.091429-13.165714-29.257143-29.257143-29.257143H131.657143zM404.48 980.114286H131.657143c-48.274286 0-87.771429-39.497143-87.771429-87.771429V619.52c0-48.274286 39.497143-87.771429 87.771429-87.771429h272.822857c48.274286 0 87.771429 39.497143 87.771429 87.771429V892.342857c0 48.274286-39.497143 87.771429-87.771429 87.771429zM131.657143 590.262857c-16.091429 0-29.257143 13.165714-29.257143 29.257143V892.342857c0 16.091429 13.165714 29.257143 29.257143 29.257143h272.822857c16.091429 0 29.257143-13.165714 29.257143-29.257143V619.52c0-16.091429-13.165714-29.257143-29.257143-29.257143H131.657143zM894.537143 490.057143H621.714286c-48.274286 0-87.771429-39.497143-87.771429-87.771429V129.462857c0-48.274286 39.497143-87.771429 87.771429-87.771428h272.822857c48.274286 0 87.771429 39.497143 87.771428 87.771428V402.285714c0 48.274286-39.497143 87.771429-87.771428 87.771429zM621.714286 100.205714c-16.091429 0-29.257143 13.165714-29.257143 29.257143V402.285714c0 16.091429 13.165714 29.257143 29.257143 29.257143h272.822857c16.091429 0 29.257143-13.165714 29.257143-29.257143V129.462857c0-16.091429-13.165714-29.257143-29.257143-29.257143H621.714286zM839.68 795.062857H588.8c-16.091429 0-29.257143-13.165714-29.257143-29.257143s13.165714-29.257143 29.257143-29.257143h251.611429c16.091429 0 29.257143 13.165714 29.257142 29.257143s-13.165714 29.257143-29.988571 29.257143z m88.502857-197.485714H588.8c-16.091429 0-29.257143-13.165714-29.257143-29.257143s13.165714-29.257143 29.257143-29.257143h339.382857c16.091429 0 29.257143 13.165714 29.257143 29.257143s-13.165714 29.257143-29.257143 29.257143zM746.057143 972.8H588.8c-16.091429 0-29.257143-13.165714-29.257143-29.257143s13.165714-29.257143 29.257143-29.257143H746.057143c16.091429 0 29.257143 13.165714 29.257143 29.257143s-13.165714 29.257143-29.257143 29.257143z"
            fill="#999999"
            p-id="805"
          ></path>
        </svg>
      </div>
      <div
        class="select"
        v-show="isShowAllCategories"
        @click="closeAllCategories"
      >
        <div class="titleBox">
          <div class="title">筛选</div>
          <div class="close">
            <van-icon name="cross" size="20" color="black" />
          </div>
        </div>
        <div class="categories1" @click.stop="handle($event)">
          <div
            class="categorie"
            v-for="(categorie, index) in categories"
            :key="index"
            :data-index="index"
            :class="{ currentCategorie: categorieI == index }"
          >
            {{ categorie.title }}
          </div>
        </div>
      </div>
    </div>
    <div class="index">
      <SimpleVideo v-for="item in list" :key="item.id" :videoInfo="item" />
    </div>
  </div>
</template>

<script>
import SimpleVideo from "@/components/SimpleVideo.vue";

export default {
  name: "SearchCategorieView",
  components: {
    SimpleVideo,
  },
  data() {
    return {
      categories: [{ title: "全部", value: this.$route.query.category_id }],
      list: null,
      title: "",
      categorieI: 0,
      isShowAllCategories: false,
      page: 1,
      isFirst: true,
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });
      this.$axios
        .get(
          `https://apis.netstart.cn/xpc/articles?category_id=${
            this.categories[this.categorieI].value
          }&page=${this.page}`
        )
        .then((res) => {
          // console.log(res);
          if (this.isFirst) {
            if (this.$route.query.category_id == 0) {
              this.categories = [
                ...this.categories,
                ...res.data.data.header.categories,
              ];
              this.title = "全部作品";
            } else {
              this.categories = [
                ...this.categories,
                ...res.data.data.header.categories[this.$route.query.index].sub,
              ];
              this.title =
                res.data.data.header.categories[this.$route.query.index].title;
            }
          }
          this.isFirst = false;
          // console.log(this.categories);
          this.list = res.data.data.list;
          this.page++;
          this.$toast.clear();
        });
    },
    back() {
      window.history.go(-1);
    },
    showAllCategories() {
      this.isShowAllCategories = true;
    },
    closeAllCategories() {
      this.isShowAllCategories = false;
    },
    handle(e) {
      let target = e.target;
      // console.log(target.dataset.index);
      if (target.dataset.index) {
        this.page = 1;
        this.categorieI = target.dataset.index;
        this.isShowAllCategories = false;
        this.getData();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.searchCategorieView {
  padding-top: 100px;

  header {
    background-color: white;
    box-sizing: border-box;
    border-bottom: 1px solid #f2f2f2;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    height: 50px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    > div {
      width: 33%;
    }

    .back {
      i {
        margin-left: 15px;
      }
    }

    .title {
      font-size: 20px;
      font-weight: bold;
      text-align: center;
    }
  }

  .top {
    width: 100%;
    height: 50px;
    position: fixed;
    left: 0;
    top: 50px;
    z-index: 10;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f2f2f2;

    .categories {
      margin-left: 15px;
      width: 85%;
      overflow-x: scroll;
      display: flex;
      flex-wrap: nowrap;

      .categorie {
        margin-right: 10px;
        // width: 50px;
        padding: 0 15px;
        text-align: center;
        height: 30px;
        line-height: 30px;
        border-radius: 5px;
        background-color: #f7f7f7;
        font-size: 13px;
        flex-shrink: 0;
      }

      .currentCategorie {
        color: red;
      }
    }

    .all {
      background-color: white;
      width: 15%;
      height: 30px;
      // line-height: 30px;
      display: flex;
      align-items: center;
      box-shadow: -10px 0px 10px 0px white;

      .icon {
        margin-left: 15px;
      }
    }

    .select {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 616px;
      background-color: rgba(0, 0, 0, 0.5);

      .titleBox {
        background-color: white;
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #f2f2f2;

        .title {
          font-weight: bold;
          font-size: 16px;
          margin-left: 15px;
        }

        .close {
          margin-right: 15px;
        }
      }

      .categories1 {
        padding: 20px 15px;
        background-color: white;
        display: flex;
        flex-wrap: wrap;

        .categorie {
          margin-right: 10px;
          margin-bottom: 10px;
          // width: 50px;
          padding: 0 15px;
          text-align: center;
          height: 30px;
          line-height: 30px;
          border-radius: 5px;
          background-color: #f7f7f7;
          font-size: 13px;
          flex-shrink: 0;
        }

        .currentCategorie {
          color: red;
        }
      }
    }
  }

  .index {
    padding: 0 15px;
  }
}
</style>
